<template>
    <view v-if="cur">
        <nut-cell center :title="cur.category" :sub-title="cur.direction" @click="back">
            <template #desc>
                <view style="color: blue;">{{ cur.code }}</view>
            </template>
        </nut-cell>
        <nut-audio url="alert.wav" type="none" v-if="showAlert" autoplay=""></nut-audio>
        <nut-cell title="扫描数量">
            <template #link>
                <nut-input-number v-model="counter" :min="0" :max="packingLimit" />
            </template>
        </nut-cell>
        <view class="card">
            <view :style="cur.code != curCode ? 'color:red' : ''">{{ curCode }}</view>
        </view>


        <view class="back">
            <nut-space direction="horizontal" fill>
                <nut-button plain type="info" @click="resetConfirm">重置</nut-button>
            
            <nut-button plain type="info" @click="back">选择箱码</nut-button>
            </nut-space>
      
        </view>
    </view>
</template>
<script setup lang="js">
import { getCode, getDeviceSettingByDeviceName, saveCode } from '@/api/sqlutil';
import router from '@/router/index';
import { showDialog, showToast } from '@nutui/nutui';
import { onMounted, onUnmounted, ref } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const back = () => {
    router.back();
}
const cur = ref(route.query);
const ry = window.cordova.plugins.RyBridge;
const counter = ref(0);
const packingLimit = ref(1);
const showAlert = ref(false);
const curCode = ref('请扫描！');
const autoSave = ref(false);
const onOk = () => {
    counter.value = 0;
    curCode.value = '请扫描...';
    saveCodeNumber();
}

const saveCodeNumber = () => {
    if (!autoSave.value) {
        return;
    }
    var code = {
        code: cur.value.code,
        number: counter.value,
        timestamp: new Date().getTime()
    }
    saveCode(code);
}

const onCancel = () => {
  console.log('event cancel')
}
const resetConfirm = () => {
  showDialog({
    title: '确认重置吗?',
    content: "重置后，扫描计数归零。",
    onCancel,
    onOk
  })
}



const barcodeListener = {
    success: (result) => {
        curCode.value = result.barcodeData;
        if (result.barcodeData === cur.value.code) {
            var success = checkLimt();
            if(success){
                counter.value++;
                saveCodeNumber();
            }
        } else {
            alertErr('与当箱码不同 :' + result.barcodeData);
        }
    },
    error: () => {
        showToast.warn('扫码失败');
    }
}

const alertErr = (msg) => {
    window.navigator.vibrate(1000);
    showAlert.value = true;
    setTimeout(() => {
        showAlert.value = false;
    }, 1000);
    showToast.warn(msg);
}

const checkLimt = () => {
    if (counter.value >= packingLimit.value) {
        alertErr('已超过额定数量' + packingLimit.value);
        return false;
    } else{
        return true;
    }
}

const getLimit = async () => {
    const data = await getDeviceSettingByDeviceName(cur.value.category);
    if (data) {
        packingLimit.value = data.packing_limit;
    } else {
        console.log('No data found');
    }
}
const getCodeCounter = async () => {
    if (!autoSave.value) {
        return;
    }
    const data = await getCode(cur.value.code);
    if (data) {
        counter.value = data.number;
    } else {
        console.log('No data found');
    }
}

onMounted(() => {
    ry.addBarcodeEventListener(barcodeListener)
    getLimit();
    getCodeCounter();
});
onUnmounted(() => {
    ry.removeBarcodeEventListener(barcodeListener)
});

</script>
<style scoped>
.card {
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 5px;
    border: 1px solid #e8e8e8;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.back {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px;
    margin-right: 20px;
}
</style>